<template>
    <div class="information_container container">
        <search-bar   :placeholder="placeholder" :pageParam="pageParamObj" :url="url" :inputPlaceholder="inputPlaceholder"></search-bar>
        <div class="img_container">
            <mt-swipe :auto="8000" v-if="bannerList.length !==0">
                    <mt-swipe-item v-for="(item) in bannerList" :key="item.id" @click.native="turnToPage(item.id)">
                        <div  class="carousel">
                        <img :src="item.attachments" alt="">
                        <p> {{item.theme}}</p>
                        </div>
                    </mt-swipe-item>
            </mt-swipe>
        </div>
        <mt-navbar v-model="selected" @click.native="tabChange">
            <mt-tab-item id="01">两学一做<span class="num">({{lxyzCount}})</span></mt-tab-item>
            <mt-tab-item id="02">三会一课<span class="num">({{shykCount}})</span></mt-tab-item>
            <mt-tab-item id="03">党建动态<span class="num">({{djdtCount}})</span></mt-tab-item>
            <mt-tab-item id="04">党建廉政<span class="num">({{dflzCount}})</span></mt-tab-item>
        </mt-navbar>
        <div class="top_bg">
            <img src="../assets/img/u147.jpg" alt="">
        </div>
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="01">
                <div class="main-body" ref="wrapper">

                    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"
                                 :autoFill="isAutoFill">
                        <ul class="mui-table-view mui-grid-view">

                            <li v-for="item in listData" :key="item.id"  @click="turnToPage(item.id)">
                                <div class="img_box">
                                    <img :src="item.attachments " alt="">
                                </div>
                                <div class="content ">
                                    <h3>{{item.theme}}</h3>
                                    <p class="detail">{{item.description }}</p>
                                    <p class="time">{{item.activityDate}}</p>
                                </div>
                            </li>
                        </ul>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>


            <mt-tab-container-item id="02">
                <div class="main-body" ref="wrapper">
                    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore1"
                                 :autoFill="isAutoFill">
                        <ul class="mui-table-view mui-grid-view">
                            <li v-for="item in listData" :key="item.id"  @click="turnToPage(item.id)">
                                <div class="img_box">
                                    <img :src="item.attachments " alt="">
                                </div>
                                <div class="content ">
                                    <h3>{{item.theme}}</h3>
                                    <p class="detail">{{item.description }}</p>
                                    <p class="time">{{item.activityDate}}</p>
                                </div>
                            </li>
                        </ul>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="03">
            <div class="main-body" ref="wrapper">
                <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore2"
                             :autoFill="isAutoFill">
                    <ul class="mui-table-view mui-grid-view">
                        <li v-for="item in listData" :key="item.id"  @click="turnToPage(item.id)">
                            <div class="img_box">
                                <img :src="item.attachments " alt="">
                            </div>
                            <div class="content ">
                                <h3>{{item.theme}}</h3>
                                <p class="detail">{{item.description }}</p>
                                <p class="time">{{item.activityDate}}</p>
                            </div>
                        </li>
                    </ul>
                </mt-loadmore>
            </div>
        </mt-tab-container-item>
            <mt-tab-container-item id="04">
                <div class="main-body" ref="wrapper">
                    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore3"
                                 :autoFill="isAutoFill">
                        <ul class="mui-table-view mui-grid-view">
                            <li v-for="item in listData" :key="item.id"  @click="turnToPage(item.id)">
                                <div class="img_box">
                                    <img :src="item.attachments " alt="">
                                </div>
                                <div class="content ">
                                    <h3>{{item.theme}}</h3>
                                    <p class="detail">{{item.description }}</p>
                                    <p class="time">{{item.activityDate}}</p>
                                </div>
                            </li>
                        </ul>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>

<script>
    import searchBar from '@/components/searchBar'
    import BASE_URL from '@/api/url'
    import {pullDown} from './common/mixin'
    export default {
        name: "information",
        mixins:[pullDown],
        components: {searchBar},
        data() {
            return {
                selected: '01',
                pageParam: {
                    type: '01',
                    page: 1,
                    size: 10,
                    theme:'',
                },
                pageParamObj: {
                    page: 1,
                    size: 10,
                    theme:'',
                },
                url:'/weixin/information/list',
                placeholder:'党建资讯',
                inputPlaceholder:'搜索资讯名称',
                listData: [],
                bannerList:[],
                //可以进行上拉
                allLoaded: false,
                wrapperHeight: 0,
                totalNum: null,
                //是否自动触发上拉函数
                isAutoFill: false,
                dflzCount: null,
                djdtCount: null,
                lxyzCount: null,
                shykCount:null,
                pageType:'information'
            }
        },
        activated() {
            this.$get('/weixin/information/getCount').then(data=>{
                this.dflzCount = data.data.dflzCount;
                this.djdtCount = data.data.djdtCount;
                this.lxyzCount = data.data.lxyzCount;
                this.shykCount = data.data.shykCount;
            });
            this.fetchData();
            this.getBanner();
        },
        created(){
            document.title = '党建资讯';
            this.$get('/weixin/information/getCount').then(data=>{
                this.dflzCount = data.data.dflzCount;
                this.djdtCount = data.data.djdtCount;
                this.lxyzCount = data.data.lxyzCount;
                this.shykCount = data.data.shykCount;
            });
            this.getBanner();
            this.fetchData()
        },
        methods:{
            fetchData(){
                this.$get('/weixin/information/list',this.pageParam).then(data=>{
                    if (!(data.data.totalNum > data.data.currentPage * data.data.pageSize)) {
                        this.allLoaded = true; // 若数据已全部获取完毕
                    }
                    this.listData = data.data.items.map((item) => {
                        return {
                            activityDate: item.activityDate,
                            attachments: `${BASE_URL}/${item.attachments}`,
                            browseCount: item.browseCount,
                            id: item.id,
                            theme: item.theme,
                            description: item.description,
                            praiseCount: item.praiseCount
                        }
                    });

                })
            },

        }
    }
</script>

<style scoped>

</style>

<style>

</style>